<!--此插件仅适用于每个page引用一个-->
<template>
    <div>
        <div class="wrapper">
            <transition name="slide-fade">
                <div class="box" v-if="show">
                    <Spin class="status-icon">
                        <Icon  v-show="status=='loading' ? true : false" type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                        <Icon v-if="status=='success' ? true : false" type="ios-checkmark-circle" color="green" size=20
                              class="status-icon"/>
                        <Icon v-if="status=='fail' ? true : false" type="ios-close-circle" color="red" size=20
                              class="status-icon"/>
                    </Spin>
                    <span class="msg-txt" v-text="msg"></span>
                    <Icon v-if="status=='fail' ? true : false" type="ios-close" size=20
                          class="status-icon" @click="close"/>
                </div>
            </transition>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default{
        components: {},
        props: {
            show:{
                type:Boolean,
                default:false
            },
            msg: {
                type: String,
                default: '正在努力加载中……'
            },
            status: {
                type: String,
                default: 'loading'//状态包括loading，success，fail
            }
        },
        data () {
            return {}
        },
        methods: {
            close:function () {
                this.$emit('close');
            }
        },
        created(){

        },
        munted(){

        }
    }
</script>

<style scoped>
    .wrapper {
        width: 100%;
        position: fixed;
        top: 20px;
        left: 0;
        text-align: center;
    }

    .box {
        display: inline-block;
        padding: 6px 10px;
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 3px;

    }

    .demo-spin-icon-load {
        animation: ani-demo-spin 1s linear infinite;
    }

    @keyframes ani-demo-spin {
        from {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(180deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    .status-icon {
        display: inline-block;
        width:22px;
        height:22px;
    }

    .msg-txt {
        line-height: 24px;
        position: relative;
        top: 1px;
    }
    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateY(-30px);
        opacity: 0;
    }
</style>